<template>
  <div class="sliderContainer">
    <a-menu style="width: 11rem" mode="inline" @click="handleClick">
      <a-menu-item key="findMusic" class="menuItem" :default-selected-keys="['1']">
        发现音乐
      </a-menu-item>
<!--      <a-menu-item key="2" class="menuItem">-->
<!--        播客-->
<!--      </a-menu-item>-->
      <a-menu-item key="3" class="menuItem">
        视频
      </a-menu-item>
      <a-menu-item key="4" class="menuItem">
        关注
      </a-menu-item>
<!--      <a-menu-item key="5" class="menuItem">-->
<!--        直播-->
<!--      </a-menu-item>-->
      <a-menu-item key="6" class="menuItem">
        私人FM
      </a-menu-item>
      <a-menu-item selectable="false" disabled class="menuItem menuItemTitle " style="cursor: auto;">
        我的音乐
      </a-menu-item>
      <a-menu-item key="7" class="menuItem">
        本地与下载
      </a-menu-item>
      <a-menu-item key="8" class="menuItem">
        最近播放
      </a-menu-item>
      <a-sub-menu key="sub1" class="playListTitle" v-if="createPlayListVisible">
        <span slot="title" class="playListTitle">创建的歌单</span>
        <a-menu-item :key="item.id" class="menuItem menuItemMusicList" v-for="(item,key) in createPlayListData"
                     :title="item.name">
          <span v-if="key == 0">我喜欢的音乐</span>
          <span v-else>{{ item.name }}</span>
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu key="sub2" class="playListTitle" v-if="collectionPlayListVisible">
        <span slot="title" class="playListTitle">收藏的歌单</span>
        <a-menu-item :key="item.id" class="menuItem menuItemMusicList " v-for="(item) in collectionPlayListData"
                     :title="item.name">
          {{ item.name }}
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
import {userPlaylist} from "@/api/api";

export default {
  name: "slider",
  data() {
    return {
      createPlayListVisible: false,
      collectionPlayListVisible: false,
      createPlayListData: [],
      collectionPlayListData: []
    }
  },
  mounted() {
    this.getUserMusicList();
  },
  methods: {
    getUserMusicList() { // 获取用户歌单
      let _this = this;
      if (!_this.$store.getters.account) {
        _this.createPlayListVisible = false;
        _this.collectionPlayListVisible = false;
        return;
      }
      _this.createPlayListVisible = true;
      _this.collectionPlayListVisible = true;
      let params = {
        'uid': _this.$store.getters.account.id
      }
      userPlaylist(params).then(res => {
        _this.handlePlayListData(res.playlist);
      })
    },
    handlePlayListData(playlist) {
      let _this = this;
      let userId = _this.$store.getters.account.id;
      playlist.forEach(function (item) {
        if (userId == item.creator.userId) {
          _this.createPlayListData.push(item)
        } else {
          _this.collectionPlayListData.push(item)
        }
      })
    },
    handleClick(e) {
      // console.log(e)
      let path = "";
      if (e.keyPath.length > 1 ){
        path = "/playListDetail";
      }else {
        if (e.key == 'findMusic') {
          path = "/"
        }
      }
      this.$router.push({
        path: path,
        query: {
          musicListId: e.key
        },
      })
      this.$message.warn('敬请期待！')
    },
  }
}
</script>

<style scoped>

.sliderContainer {
  height: auto;
  padding: 0;
  margin: 0;
}


.menuItem {
  margin: 0 !important;
  height: 2.2rem !important;
  text-align: left;
  user-select: none;
}

.menuItem:hover {
  color: #383838;
  /*font-weight: bold;*/
  background-color: #eeeeee;
}

.menuItemMusicList {
  padding-left: 1.5rem !important;
}

.menuItemTitle {
  font-size: 13px !important;
  color: #c9c9c9 !important;
  background-color: white !important;
  font-weight: normal !important;

}

.menuItemTitle:hover {
  font-size: 13px !important;
  color: #c9c9c9 !important;
  background-color: white;
  font-weight: normal !important;
}

.menuItemTitle:active {
  font-size: 13px !important;
  color: #c9c9c9 !important;
  background-color: white;
  font-weight: normal !important;
}

.playListTitle {
  user-select: none;
  text-align: left;
}

/* 选中菜单状态*/
.ant-menu-item-selected:not(menuItemTitle) {
  color: #383838;
  font-weight: bold;
  background-color: #eeeeee !important;
}

/*设置未选中菜单项鼠标滑过样式*/
.ant-menu-item-active {
  background-color: #eeeeee;
  color: #383838 !important;
}
.ant-menu-item::after{
  border-right: red;
}

.ant-menu-submenu:hover {
  background-color: #eeeeee !important;
}

.ant-menu-submenu-inline:hover {
  background-color: #eeeeee !important;
}


.playListTitle {
  color: #c9c9c9 !important;
}

.playListTitle:hover .playListTitle:before .playListTitle:after {
  color: #383838 !important;
  font-size: 13px !important;
  font-weight: normal !important;
}

::v-deep .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before {
  background: linear-gradient(to right, #383838, #383838);
}

::v-deep .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after {
  background: linear-gradient(to right, #383838, #383838);
}

</style>
